<template>
	<picker :mode="mode" :range="range" :range-key="rangeKey" :value="pickerValue" :start="start" :end="end"
		:fields="fields" :disabled="disabled" @change="handleChange" @cancel="handleCancel">
		<slot>
			<!-- 默认插槽内容 -->
			<view class="picker-input">
				{{ displayText || placeholder }}
			</view>
		</slot>
	</picker>
</template>

<script>
	/**
	 * 与 picker 代码完全一致，就是把 value 改成了双向绑定
	 */
	export default {
		name: 'SeaPicker',
		props: {
			// v-model 绑定的值
			value: {
				type: [String, Number, Array],
				default: ''
			},
			// picker 模式
			mode: {
				type: String,
				default: 'selector',
				validator: value => ['selector', 'multiSelector', 'time', 'date', 'region'].includes(value)
			},
			// 选择器数据
			range: {
				type: Array,
				default: () => []
			},
			// 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
			rangeKey: {
				type: String,
				default: ''
			},
			// 仅当 mode 为 selector 或 multiSelector 时有效
			pickerValue: {
				type: [Number, Array],
				default: 0
			},
			// 仅当 mode 为 time 或 date 时有效，选择有效时间范围的开始时间
			start: {
				type: String,
				default: ''
			},
			// 仅当 mode 为 time 或 date 时有效，选择有效时间范围的结束时间
			end: {
				type: String,
				default: ''
			},
			// 仅当 mode 为 date 时有效，选择器粒度
			fields: {
				type: String,
				default: 'day',
				validator: value => ['year', 'month', 'day'].includes(value)
			},
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			// 占位符
			placeholder: {
				type: String,
				default: '请选择'
			},
			// 自定义显示文本格式化函数
			displayFormatter: {
				type: Function,
				default: null
			}
		},
		computed: {
			displayText() {
				if (!this.value && this.value !== 0) return ''

				if (this.displayFormatter) {
					return this.displayFormatter(this.value)
				}

				// 根据不同模式显示不同文本
				switch (this.mode) {
					case 'selector':
						return this.range[this.value] || ''
					case 'multiSelector':
						return this.value.map((item, index) => this.range[index][item]).join(', ')
					case 'date':
					case 'time':
						return this.value
					case 'region':
						return this.value.join(' ')
					default:
						return this.value
				}
			}
		},
		methods: {
			handleChange(e) {
				const value = e.detail.value
				this.$emit('input', value) // 兼容 v-model
				this.$emit('change', value) // 保留原生 change 事件
			},
			handleCancel() {
				this.$emit('cancel')
			}
		}
	}
</script>